<script setup>
import MCard from '@/components/HCard.vue'
import FormProps from '@/views/workOrder/components/FormProps.vue'
import { getDisposeOrderFilterOrg } from '@/apis/order.js'
import { setCustomTitle } from '@/utils/unit'
import { usePermissionStore } from '@/stores/permission'
import { getAreaByCode } from '@/utils/areaQuery.js'
const { user } = usePermissionStore()

import { ref } from 'vue'
import { useStatisticsFromStore } from '@/stores/statistics.js'

const { statistics } = useStatisticsFromStore()
const props = defineProps({
  value: {
    type: Boolean,
    default: false
  }
})
const isShowCldw = ref(false)
const thisTimeSpendRank = ref({})
const emit = defineEmits(['update:value', 'confirm', 'update:columns'])
const state = reactive({
  disposeOrderFilterData: [], // 单位
  areaCode: '',
  names: ''
})

const showPopup = computed({
  get() {
    return props.value
  },
  set(val) {
    emit('update:value', val)
  }
})

// 类别
const getDisposeOrderFilterOrgD = async (t) => {
  const res = await getDisposeOrderFilterOrg(t)
  if (res.errorcode == 0) {
    state.disposeOrderFilterData = res.data.map((item) => {
      item.disable = false
      item.label = item.name
      item.value = item.areaCode
      return item
    })
  } else {
    console.log(res.msg)
  }
}

// 重置归属地查询
const restPostionChange = () => {
  console.log(state.disposeOrderFilterData)
  state.disposeOrderFilterData = state.disposeOrderFilterData?.map((item) => {
    item.disable = false
    return item
  })
  state.areaCode = user.areaCode
  state.names = getAreaByCode(user.areaCode)
}

// 投诉归属地查询确定
const postionChange = () => {
  showPopup.value = false
  thisTimeSpendRank.value.areaCode = state.areaCode
  statistics.timeSpendRank = {
    ...statistics.timeSpendRank,
    ...thisTimeSpendRank.value
  }
  // statistics.timeSpendRank.areaCode = state.areaCode
  // console.log(statistics.timeSpendRank)
  emit('confirm', setCustomTitle(state.names, 4), state.areaCode)
}

watch(
  () => props.value,
  (newVal) => {
    isShowCldw.value = newVal
    emit('input', newVal)
  }
)

onMounted(async () => {
  await getDisposeOrderFilterOrgD({ type: 'REGION' })
})
</script>

<template>
  <div>
    <van-popup
      v-model="showPopup"
      closeable
      round
      close-icon="arrow-down"
      position="bottom"
      custom-style="border-top-left-radius: 3px;height:'30%', border-top-right-radius: 3px;"
      :style="{ height: '60%' }"
    >
      <m-card title="所属地">
        <template v-slot:headerLine>
          <div
            style="position: relative; bottom: -45px"
            class="border-b-1px h-10px border-b-solid border-b-[#F2F5FA]"
          ></div>
        </template>
        <FormProps
          :ColumnsData.sync="state.disposeOrderFilterData"
          :name.sync="state.names"
          :values.sync="state.areaCode"
        ></FormProps>
      </m-card>
      <div class="type-bg">
        <m-card>
          <ul class="type-list-item" style="margin-top: -22px">
            <li
              class="reset w-120px"
              style="color: #36b374"
              @click="restPostionChange"
            >
              重置
            </li>
            <li
              class="reset bg-[#36B374] flex-1"
              @click="postionChange"
              style="color: white"
            >
              确定
            </li>
          </ul>
        </m-card>
      </div>
    </van-popup>
  </div>
</template>

<style scoped lang="less">
.type-bg {
  margin: 10px 0;
  background: #ffffff;
  box-shadow: 0 -10px 16px 0 #0000000d;
}
.type-list-item {
  display: flex;
  justify-content: flex-start;
  // //  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
  li.currt {
    width: 90px;
    height: 32px;
    background: #36b374;
    border: 1px solid #36b374;
    border-radius: 2px;
    margin-right: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  li.reset {
    border: 0.5px solid #36b374;
    border-radius: 4px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
  }
  li {
    width: 90px;
    height: 32px;
    border: 0.5px solid #c8c9cc;
    border-radius: 2px;
    margin-right: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #54565c;
  }

  li:nth-of-type(3n) {
    margin-right: 0px;
  }
}
</style>
